<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		
		table{
			width: 500px;

		}
		
		#div{
			background: #ccc;
			width: 500px;
			height: 500px;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			display: none;
		
			text-align: center;
		}
		#div1{
			background: #ccc;
			width: 500px;
			height: 500px;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			display: none;
			text-align: center;
		}
		#box1{
			margin: 20px auto;
			width: 100%;
			text-align: center;
		}
		td{
			text-align: center;
		}
		nav{
				width: 100%;
				height: 50px;
				background: #8A8A8A;
					
				position: relative;		
			}
			#list{
				display: none;
				width: 250px;
				height: 300px;
				background: #8A8A8A;
				text-align: center;
				position: absolute;
				right: 0;
			}
			#a{
				margin: auto;
				margin-top: 10px;
			}
			p{
				height: 80px;
				line-height: 80px;
				color: white;
			}
			td{
				height: 30px;
			}
			th{
				height: 30px;
			}
			h1{
				text-align: center;
				line-height: 50px;
			}
			#btn{
				margin-top: 30px;
			}
			#btns{
				margin-top: 30px;
			}
	</style>
	<body>
		<nav>
			<h1>图书信息列表</h1>
			<img src="img/user.png" style="position: absolute;right: 100px;top: 0;" />
		</nav>
		<div id="list">
			<p>用户名:<input type="text" value=""></p>
			<p>i&nbsp;  d:<input type="text" value=""></p>
			<button id="bt" style="width: 80px;height: 30px;">注销</button>
		</div>
		<div id="box1">					
			<input type="button" id="" value="刷新" style="width: 80px;height: 30px;"/>
			<input type="button" name="" id="" value="添加数据"  style="width: 80px;height: 30px;"/>		
			<table border="1" cellspacing="0" cellpadding="0" id="a" style="width: 800px;">
				<tr>
					<th>图片</th>
					<th>书名</th>
					<th>作者</th>
					<th>会员价</th>
					<th>出版社</th>
					<th>操作</th>
				</tr>
				
			</table>
		</div>
		
			<div id="div">
				<table>
					<tr>
						<td>图片</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>书名</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>作者</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>会员价</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>出版社</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>操作</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>上架时间</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>出版时间</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>价格</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
				</table>
				<button id="btn" style="width: 80px;height: 30px;">添加</button>
				<button id="btnss" style="width: 80px;height: 30px;">取消</button>				
			</div>
			<div id="div1">
			<table id="gai">
					<tr>
						<td>图片</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>书名</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>作者</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>会员价</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>出版社</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>操作</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>上架时间</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>出版时间</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
					<tr>
						<td>价格</td>
						<td><input type="text" name="" id="" value="" /></td>
					</tr>
				</table>
				
				<button id="btns" style="width: 80px;height: 30px;">修改</button>
				<button id="btnsss" style="width: 80px;height: 30px;">取消</button>
			</div>
		
	</body>
	<script src="baiduTemplate.js" type="text/javascript" charset="utf-8"></script>
	
	<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>

	<!--百度模板创建-->
	<!--<script type="text/template" id="ge">
		<%for (var i = 0; i<date.length; i++) {%>
			<tr>
					<td>0</td>
					<td><%=date[i].name%></td>
					<td><%=date[i].autho%></td>
					<td><%=date[i].vipprice%></td>
					<td><%=date[i].press%></td>
					<td><button><button><button><button></td>
				</tr>
		<%}%>
	</script>	-->
		
		
	
	<script type="text/javascript">
		
		$("#btnsss").on("click",function(){
			$("body").css("background","rgba(0,0,0,0)");
			$("#div1").css("display","none");
		})
		$("#btnss").on("click",function(){
			$("body").css("background","rgba(0,0,0,0)")
			$("#div").css("display","none");
					
		})
	 	var b = false
		$("input:button").eq(1).on("click",function(){
			$("body").css("background","rgba(0,0,0,0.6)");
			$("#div").css("display","block");
		})	
			//点击传送和获取数据
			$("#btn").on("click",function(){
				if ($("#div input").val()=="") {	
					alert("填写完整")
					b = true					
				}else{
					$("body").css("background","rgba(0,0,0,0)")
					$("#div").css("display","none");
					//传送的数据
					var obj = {
						name:$("#div input").eq(1).val(),
						src:$("#div input").eq(0).val(),
						author:$("#div input").eq(2).val(),
						vipprice:$("#div input").eq(3).val(),
						press:$("#div input").eq(4).val(),
						puttime:$("#div input").eq(6).val(),
						outtime:$("#div input").eq(7).val(),
						price:$("#div input").eq(8).val(),
						
					}
					//给后台传送数据
					$.post("http://localhost:6500/book",obj,function(data){
							$("<tr><td><img src="+data.src+"/></td><td>"+data.name+"</td><td>"+data.author+"</td><td>"+data.vipprice+"</td><td>"+data.press+"</td><td><button class='bian'>编辑</button><button class='del'>删除<span>"+data.id+"</span></button></td></tr>").appendTo("#a")
							
																																																					
					})
																	
					b = false
					$("#div input").eq(1).val("")
					$("#div input").eq(0).val("")
					$("#div input").eq(2).val("")
					$("#div input").eq(3).val("")
					$("#div input").eq(4).val("")
					$("#div input").eq(5).val("")
					$("#div input").eq(6).val("")
					$("#div input").eq(7).val("")
					$("#div input").eq(8).val("")
				}
			})
			
		

					//获取数据
					$("#box1 input").eq(0).on("click",function(){						
						$("#a tr").remove()
						$.get("http://localhost:6500/book",function(data){												
							for (var i = 0; i<data.length; i++) {
							$("<tr><td><img src="+data[i].src+"/></td><td>"+data[i].name+"</td><td>"+data[i].author+"</td><td>"+data[i].vipprice+"</td><td>"+data[i].press+"</td><td><button class='bian'>编辑</button><button class='del'>删除<span>"+data[i].id+"</span></button></td></tr>").appendTo("#a")
								
							}
						
						
						})

					})	
					
					//页面刷新或加载过后把后台数据展示出来
					$(window).on("load",function(){
						$("nav img").on("click",function(){
							$("#list").slideToggle(400)
							$("#list input").eq(0).val(localStorage.getItem("username"))
							$("#list input").eq(1).val(localStorage.getItem("password"))
						})												
						$.get("http://localhost:6500/book",function(data){												
							for (var i = 0; i<data.length; i++) {
							$("<tr><td><img src="+data[i].src+"/></td><td>"+data[i].name+"</td><td>"+data[i].author+"</td><td>"+data[i].vipprice+"</td><td>"+data[i].press+"</td><td><button class='bian'>编辑</button><button class='del'>删除<span>"+data[i].id+"</span></button></td></tr>").appendTo("#a")
								
							}
						
						})
					})
					
					
		
		//点击删除的函数
		
			
			$("#a").on("click",".del",function(){								
				$(this).parents("tr").remove();
				$.ajax({
						type:"delete",
						url:"http://localhost:6500/book/"+$(this).children().html(),
						success:function(a){
							console.log(a)
						},
							error:function(e){
							console.log(e)
						}
						})
				})									
						
						//p编辑 修改信息
							$("#a").on("click",".bian",function(){
								var id = ""
								$("body").css("background","rgba(0,0,0,0.6)");
								$("#div1").css("display","block");
								$.ajax({
									type:"get",
									url:"http://localhost:6500/book/"+$(this).next().children().html(),									
									success:function(ee){
										console.log(ee)
										$("#gai input").eq(1).val(ee.name)
										$("#gai input").eq(0).val(ee.src)
										$("#gai input").eq(2).val(ee.author)
										$("#gai input").eq(3).val(ee.vipprice)
										$("#gai input").eq(4).val(ee.press)
										$("#gai input").eq(6).val(ee.puttime)
										$("#gai input").eq(7).val(ee.outtime)
										$("#gai input").eq(8).val(ee.price)
										id = ee.id
									},
									error:function(er){
										console.log(er)
									}
								});
								$("#btns").off()
								var that = this
								$("#btns").on("click",function(){	
									$("body").css("background","rgba(0,0,0,0)");
									$("#div1").css("display","none");
									var objs = {
										name:$("#div1 input").eq(1).val(),
										src:$("#div1 input").eq(0).val(),
										author:$("#div1 input").eq(2).val(),
										vipprice:$("#div1 input").eq(3).val(),
										press:$("#div1 input").eq(4).val(),
										puttime:$("#div1 input").eq(6).val(),
										outtime:$("#div1 input").eq(7).val(),
										price:$("#div1 input").eq(8).val(),
										
									}
									$.ajax({
									type:"put",
									data:objs,
									url:"http://localhost:6500/book/"+id,
									success:function(ee){
										console.log(ee)
									$(that).parent().parent().replaceWith($("<tr><td><img src="+ee.src+"/></td><td>"+ee.name+"</td><td>"+ee.author+"</td><td>"+ee.vipprice+"</td><td>"+ee.press+"</td><td><button class='bian'>编辑</button><button class='del'>删除<span>"+ee.id+"</span></button></td></tr>"))
										
									}
								});	
												
								})
				
							})
						
		//注销用户
		$("#bt").on("click",function(){
			$.ajax({
				type:"delete",
				url:"http://localhost:6500/users/"+localStorage.getItem("password"),
				success:function(e){
					console.log(e)
					localStorage.removeItem("password")
					localStorage.removeItem("username")
					$("#list input").eq(0).val("")
					$("#list input").eq(1).val("")
					location.href="in.html"
				},
				error:function(er){
					console.log(er)
				}
			});
		})
		
	</script>
</html>
